前言

前一篇教大家如何使用文字，及一些常用的屬性，今天來説說圖片的使用吧。大家可以事先準備一些想在專案中使用的圖片。

Image

image 就是圖片，不論是背景或是頭像 icon 等等，在 App 開發中圖片都是不可或缺的。
細節說明請看Image官方文件解說

圖片的用法

直接在程式碼中加入，也可以透過元件庫來新增。

Image("圖片的名稱")

首先要在 Asset 中先加入圖片

點擊 Asset

若找不到 Asset ，可以從下方這張圖，點擊資料夾 icon

找到後將圖片拖曳進來，將圖片加入專案的 Asset

這邊要注意，如果在本機的檔名中使用 .JPG（大寫）移進去時可能會出問題，可以先將其改成 .jpg（小寫），再匯入 asset 中。

然後就可以顯示圖片啦～

Image("01wi")

如果各位是要匯入 icon 的圖片，可能會有三種不同大小，1x、2x、3x，可將不同的圖片放入對應的大小。如下圖：

這邊分享給大家一個可以下載 icon 的網站，免費的大部分都蠻不錯用的。
icon網站分享點此

圖片屬性

圖片有不同的屬性，除了基本的排版（移動位置），還可以將圖片加陰影加邊框等等。
上方的圖片，在放入時看起來不太理想，這是因為沒有加入修改器參數來做調整。
藍色外框是圖片原本的大小，已經完全的超出螢幕。

這時我們就必須加入 .resizable 來縮放圖片。

Image("01wi").resizable()

這邊發現圖片不是等比例縮放的，我們可以使用 .scaletofit 。

Image("01wi").resizable()   //可縮放
             .scaledToFit() //等比例符合大小

再來使用其他修改方式

將圖片限制在自定大小內

有時會需要將圖片限制在一定尺寸，例如 icon 大小等等...

Image("01wi").resizable()   //可縮放
             .scaledToFit() //等比例符合大小
             .frame(width:300,height: 200)

.scaletoFit 跟 .frame 的前後順序要注意效果會不太一樣，大家可以自己試試。

填滿

搭配 .frame 一同使用

.scaletoFill()

裁切效果

只留藍爛色框線內的內容

.clipped()

⇩  　 　   ⇩　  　  　  ⇩ 　  　加上clipped 　  ⇩ 　  　  　  ⇩ 　  　  ⇩

這邊延伸使用 url 圖片的用法

因為用法很多種，這邊分享給大家比較簡易的---- Async Image 的使用
在載入頁面時，同時將圖片載入。

第一種情況，直接使用但是圖片大小不會跟著改變。

AsyncImage(url: URL(string: "圖片網址"))
            .frame(width: 200, height: 200)//設定大小

第二種情況，先給予一個 ProgressView 再把圖片填滿。

AsyncImage(url: URL(string: "圖片網址")) { image in
            image.resizable()
        } placeholder: {
            ProgressView()
        }
        .frame(width: 50, height: 50)//設定大小

大家下篇見～